<template>
    <div id="gwCar">
      <!-- 头部导航栏-->
      <div class="navgd">
        <el-row class="top">
          <el-col :span="12" class="zuo">
            <el-row style="margin-top: 10px;">
              <el-col :span="2" :offset="1">
                <router-link to="/"><a>商城</a></router-link>
              </el-col>
              <el-col :span="2">
                <a>MIUI</a>
              </el-col>
              <el-col :span="2">
                <a>loT</a>
              </el-col>
              <el-col :span="2">
                <a>云服务</a>
              </el-col>
              <el-col :span="2">
                <a>天星数科</a>
              </el-col>
            </el-row>
          </el-col>
          <el-col class="you" :span="12">
            <el-row style="margin-top: 10px;">
              <el-col :span="2" :offset="17">
                <el-dropdown>
                  <a><i class="el-icon-user"></i>我的</a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-if="user.id!=null">
                      <el-link type="info" @click="goUserMain">用户中心</el-link>
                    </el-dropdown-item>

                    <!--商户-->
                    <el-dropdown-item v-if="user.commercialState==1">
                      <router-link to="/home"><el-link type="info">商户管理</el-link></router-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null && user.commercialState==null">
                      <router-link to="/apply_for_commercial"><el-link type="info">我要成为商户</el-link></router-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null && user.commercialState==0">
                      <router-link to="/apply_for_supplier"><el-link type="info">申请商户审核等待中...</el-link></router-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null && user.commercialState==2">
                      <router-link to="/apply_for_supplier"><el-link type="info">申请商户被拒绝，点击我可再次申请</el-link></router-link>
                    </el-dropdown-item>

                    <!--供应商-->
                    <el-dropdown-item v-if="user.id!=null && user.supplierState==1">
                      <router-link to="/home"><el-link type="info">供应商管理</el-link></router-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null && user.supplierState==null">
                      <router-link to="/apply_for_supplier"><el-link type="info">我要成为供应商</el-link></router-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null && user.supplierState==0">
                      <el-link type="info">申请供应商审核等待中...</el-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null && user.supplierState==2">
                      <router-link to="/apply_for_supplier"><el-link type="info">申请供应商被拒绝，点击我可再次申请</el-link></router-link>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="user.id==null">
                      <router-link to="/Login"><el-link type="info">登录</el-link></router-link>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.id!=null">
                      <span @click="logout"><el-link type="info">退出</el-link></span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
              <el-col :span="3" class="catcss">
                <el-badge :value="cartnum" class="item">
                  <button @click="tzgwcar" class="catcss">购物车</button>
                </el-badge>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!--搜索-->
      <div class="searchkuang" style="margin-top: 30px">
        <el-row>
          <el-col :span="16">
            <el-row class="shopflgw" style="margin-top: 42px;">
              <el-col :span="3" :offset="1">
                <a @click="fenlentzshopXq('')">全部商品分类</a>
              </el-col>
              <el-col :span="1">
                &nbsp;&nbsp;
              </el-col>

              <div v-for="(s,index) in  shoptypes">
                <el-col :span="3"  v-if="index<5">
                  <a @click="fenlentzshopXq(s.id)">{{s.name}}</a>
                </el-col>
              </div>

              <el-col :span="2">
                <a @click="fenlentzshopXq('')"><i class="el-icon-zoom-in">更多></i></a>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8" style="margin-top: 35px">
            <el-input v-model="searchtxt" style="width:250px" placeholder="请输入内容" clearable></el-input>
            <el-button type="info" style="width:70px" @click="searchipt(searchtxt)">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <div class="shopbody">
        <div class="sh111"></div>

          <el-row>
            <el-col :span="22" :offset="1">
              <div class="shoprq">

                <!--购物车详情-->
                <el-row style="margin-top: 20px">
                  <el-col :span="8">
                    <span style="font-size: 22px;margin-left: 10px">
                      购物车(全部{{cartnum}})
                    </span>
                    <button class="delbtn"><span style="color: white;font-size: 12px" @click="deleteCarts">批量删除</span></button>
                  </el-col>
                  <el-col :span="6" :offset="10">
                    <el-row>
                      <el-col :span="7" :offset="2" style="margin-top: 5px">
                        <span style="font-size: 24px;color: #ff6600">
                          {{totalMoney}}
                        </span>
                      </el-col>
                      <el-col :span="6" :offset="1">
                        <button class="jiesbtn"><span style="color: white" @click="goEvaluate">结算</span></button>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <hr>
                <el-table
                  ref="CartTable"
                  :data="carts"
                  style="width: 100%"
                  @selection-change="selectionCart">
                  <el-table-column
                    type="selection"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    label="商品信息"
                    width="350">
                    <template slot-scope="scope">
                      <el-row>
                        <el-col :span="12">
                          <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.shop.imags[0].imagUrl"
                            fit="fill"></el-image>
                        </el-col>
                        <el-col :span="12" style="margin-top: 40px">
                          <el-link type="info">{{scope.row.shop.shopName}}</el-link>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="shop.shopPrice"
                    label="单价"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    label="数量"
                    width="200">
                    <template slot-scope="scope">
                      <el-input-number size="mini" @change="handleChange(scope.row.id,scope.row.quantity)"
                                       v-model="scope.row.quantity" :min="1"></el-input-number>
                      <!--<input type="button" @click="countNum(scope.row.id,'pre')" value="-" style="width: 20px;">
                      <input type="text" style="width: 30px;text-align: center;" :value="scope.row.quantity">
                      <input type="button" @click="countNum(scope.row.id,'add')" value="+" style="width: 20px;">-->
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="金额"
                    width="180">
                    <template slot-scope="scope">
                      <span>{{scope.row.shop.shopPrice*scope.row.quantity}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="180">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        @click="deleteCart(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div style="text-align: center">
                  <!-- 分页 -->
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageno"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>

              </div>
            </el-col>
          </el-row>

      </div>
      <div class="sh111"></div>

      <!--底部-->
      <div class="site-footer">
        <div class="wenzitiao">
          <div class="wenzitiaoxia" style="margin-top: 20px">
            <a><img class="img1" src="../jiangzhipeng/images/字1.png" alt="图片出错" width="24px" height="24px">预约维修服务
            </a>
            <a><img class="img2" src="../jiangzhipeng/images/字2.png" alt="图片出错" width="24px" height="24px">7天无理由退货
            </a>
            <a><img class="img3" src="../jiangzhipeng/images/字3.png" alt="图片出错" width="24px" height="24px">15天免费换货
            </a>
            <a><img class="img4" src="../jiangzhipeng/images/字4.png" alt="图片出错" width="24px" height="24px">满69包邮（米粉节特惠） </a>
            <a class="shebian">
              <img class="img5" src="../jiangzhipeng/images/字5.png" alt="图片出错" width="24px" height="24px">520余家售后网点
            </a>
          </div>
        </div>
        <div class="zuihouxiaozi">
          <div class="zuihouxiaozizi">
            <a>小米商城 |</a>
            <a>MIUI |</a>
            <a>米家 |</a>
            <a>米聊 |</a>
            <a>多看 |</a>
            <a>游戏 |</a>
            <a>政企服务 |</a>
            <a>小米天猫店 |</a>
            <a>小米集团隐私政策 |</a>
            <a>小米公司儿童信息保护规则 |</a>
            <a>小米商城隐私政策 |</a>
            <a>小米商城用户协议 |</a>
            <a>问题反馈 |</a>
            <a>Select Location</a>
            <br>
            <a>北京互联网法院法律服务工作站 |</a>
            <a>中国消费者协会 |</a>
            <a>北京市消费者协会</a>
            <br>
            <span>@</span>
            <a>mi.com</a>
            <span>京ICP备10046444号</span>
            <a>京公网安备11010802020134号</a>
            <a>京网文[2020]027-042号</a>
            <br>
            <a>（京）网械平台备字（2018）第00005号</a>
            <a>互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
            <a>营业执照</a>
            <a>医疗器械质量公告</a>
            <br>
            <a>增值电信业务许可证</a>
            <span>网络食品经营备案</span>
            <span>京食药网食备202010048</span>
            <a>食品经营许可证</a>
            <br>
            <span>违法和不良信息举报电话：171-5104-4404</span>
            <a>知识产权侵权投诉</a>
            <span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "gwCar",
      data() {
        return {
          user:{
            id:sessionStorage.getItem('id')
          },
          searchtxt: "",
          shoptypes: [],
          carts:[],
          chekedCarts: [],//已选择购物车的数组
          pageno: 1,
          pagesize: 10,
          total: 1,
          cartnum:0
        }
      },
      methods: {
        getObject(){
          //检查用户是否登录，如果没有登录，就不做异步调用
          if(this.user.id!=null){
            //异步获取数据，根据id查询用户
            this.$axios.get("queryUserById.action/"+this.user.id,null).
            then(response=>{
              this.user = response.data;
            }).
            catch()
          }else {
            this.user= {
              id:null
            };
          }
        },
        logout(){
          //注销账号，清空sessionStorage数据
          sessionStorage.clear();
          //更换当前路由路径
          this.$router.push("/Login");
        },
        searchipt(searchtxt){
          this.$router.push({
            name:'shopXq',
            params:{
              searchtxt:searchtxt
            }
          });
        },
        fenlentzshopXq(typeid){
          this.$router.push({
            name:'shopXq',
            params:{
              typeid:typeid
            }
          });
        },
        tzgwcar(){
          if (this.user.id!=null){
            this.$router.push("/gwcar");
          }else {
            this.$router.push("/");
          }
        },
        getgwCartnum(){
          if(this.user.id!=null) {
            this.$axios.get("cart/querygwCartnum.action/" + this.user.id)
              .then(res => {
                this.cartnum = res.data;
              })
              .catch(err => {
                alert(err)
              })
          }else {
            this.cartnum= 0;
          }
        },
        goUserMain(){
          //  去用户中心
          this.$router.push("/userMainView");
        },
        goEvaluate() {
          //  去结算
          let ids=[];
          this.chekedCarts.forEach(item=>{
              ids.push(item.id);
          })
          let cartIds=JSON.stringify(ids);
          if (this.chekedCarts.length > 0) {
            this.$router.push({path:'addOrder/'+cartIds})
          } else {
            this.$message.error("请选择要结算的商品")
          }

        },
        getShoptype() {
          this.$axios.get("shopType/shopType.action")
            .then(res => {
              this.shoptypes = res.data;
            })
            .catch(err => {
              alert(err)
            })
        },
        getCart() {
          //组装数据
          var params = new URLSearchParams();
          params.append("pageno", this.pageno);
          params.append("pagesize", this.pagesize);
          params.append("uId",sessionStorage.getItem('id'));
          this.$axios.get("cart/allCart.action",{params: params})
            .then(res => {
              res.data.records.forEach(item=>{
                item.shop.imags[0].imagUrl=this.$store.state.path+item.shop.imags[0].imagUrl
              })
              this.carts = res.data.records;
              this.total = res.data.total;
            })
            .catch(err => {
              alert(err)
            })
        },
        handleSizeChange(val) {
          //每页范围
          this.pagesize = val;
          this.getCart();
        },
        handleCurrentChange(val) {
          //当前页
          this.pageno = val;
          this.getCart();
        },
        selectionCart(val) {
          //checkbox选项表改变获取对象数组
          this.chekedCarts = val;
        },
        handleChange(id, num){
          if (num != 1) {
            let cart = {id: id, quantity: num};
            this.$axios
              .put("cart/changeNum.action", cart)
              .then(res => {
                if (res.data.code == 0) {
                  this.$notify.error({
                    title: '失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }
                this.getCart();
                this.getgwCartnum();
              })
              .catch(err => {
                this.$notify.error({
                  title: '失败',
                  message: err,
                  position: 'bottom-right'
                });
              })
          }
        },
        //删除
        deleteCart(id){
          this.$confirm('你确认要删除吗？, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let ids=[];
            ids.push(id);
            this.$axios.post("cart/delCarts.action",ids)
              .then(res=> {
                if (res.data.code > 0) {
                  this.$notify({
                    title: '删除成功',
                    message: res.data.msg,
                    type: 'success',
                    position: 'bottom-right'
                  });
                  this.getCart();
                  this.getgwCartnum();
                }else {
                  this.$notify.error({
                    title: '删除失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }
              })
              .catch(function (error) {
                this.$notify.error({
                  title: '加入失败',
                  message: error,
                  position: 'bottom-right'
                });
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        deleteCarts(){
          //批量删除
          this.$confirm('你确认要删除吗？, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if ( this.chekedCarts.length==0){
              this.$message.error("请先选择要删除的商品");
              return
            }
            let ids=[];
            this.chekedCarts.forEach(item=>{
              ids.push(item.id);
            })
            this.$axios.post("cart/delCarts.action",ids)
              .then(res=> {
                if (res.data.code > 0) {
                  this.$notify({
                    title: '删除成功',
                    message: res.data.msg,
                    type: 'success',
                    position: 'bottom-right'
                  });
                  this.getCart();
                  this.getgwCartnum();
                }else {
                  this.$notify.error({
                    title: '删除失败',
                    message: res.data.msg,
                    position: 'bottom-right'
                  });
                }
              })
              .catch(function (error) {
                this.$notify.error({
                  title: '加入失败',
                  message: error,
                  position: 'bottom-right'
                });
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
      },
      computed: {
        totalMoney() {
          let money = 0;
          this.chekedCarts.forEach(item => {
            money += item.shop.shopPrice * item.quantity;
          })
          return "￥"+money;;
        }
      },
      created() {
        this.getCart();
        this.getShoptype();
        this.getgwCartnum();
      }
    }
</script>

<style scoped>
  .gwcar111{
    width: 96%;
    height: 150px;
    background-color: whitesmoke;
    border: 1px solid #B0B0B0;
    border-radius: 25px;
    margin-top: 20px;
    margin-left: 2%;
  }
  .delbtn{
    width: 65px;
    height: 30px;
    background-color: #ff6600;
    border: 1px solid #ff6600;
    border-radius: 25px;
  }
  .jiesbtn{
    width: 80px;
    height: 40px;
    background-color: #ff6600;
    border: 1px solid #ff6600;
    border-radius: 25px;
  }
  .jiesdiv{
    width: 100%;
    height: 50px;
  }

  .item-amount{
    width: 74px;
    height: 22px;
    background-color: white;
  }
  .item-amount a{
    text-decoration: none;
  }
  .item-amount a:hover{
    color: #ff6600;
  }
  .text-amount{
    width: 39px;
    height: 18px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
  }
</style>
